<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>论坛社区 - 社交圈</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #5B7BDF;
      --primary-light: #E8EBFA;
      --secondary: #FF7D54;
      --success: #4CAF50;
      --warning: #FFC107;
      --danger: #F44336;
      --text-primary: #1D2129;
      --text-secondary: #86909C;
      --bg-light: #F2F3F5;
      --bg-white: #FFFFFF;
      --border-light: #E5E6EB;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: var(--bg-light);
      color: var(--text-primary);
      line-height: 1.6;
      font-size: 15px;
      padding-bottom: 60px;
    }
    
    /* 顶部导航 */
    .navbar {
      background-color: var(--primary);
      color: white;
      padding: 0.75rem 1rem;
    }
    
    .navbar-nav .nav-link {
      color: rgba(255, 255, 255, 0.9);
      padding: 0.5rem 0.75rem;
    }
    
    .navbar-nav .nav-link.active {
      color: white;
      font-weight: 500;
    }
    
    /* 搜索栏 */
    .search-container {
      padding: 12px 15px;
      background-color: var(--bg-white);
    }
    
    .search-box {
      position: relative;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border-radius: 8px;
      border: 1px solid var(--border-light);
      font-size: 14px;
      background-color: var(--bg-light);
    }
    
    .search-input:focus {
      outline: none;
      border-color: var(--primary);
    }
    
    .search-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-secondary);
    }
    
    /* 样式切换器 */
    .style-tabs {
      display: flex;
      background-color: var(--bg-white);
      border-bottom: 1px solid var(--border-light);
    }
    
    .style-tab {
      flex: 1;
      text-align: center;
      padding: 12px 0;
      font-size: 15px;
      font-weight: 500;
      color: var(--text-secondary);
      cursor: pointer;
      position: relative;
    }
    
    .style-tab.active {
      color: var(--primary);
    }
    
    .style-tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 3px;
      background-color: var(--primary);
    }
    
    /* 论坛内容容器 */
    .forum-container {
      display: none;
    }
    
    .forum-container.active {
      display: block;
    }
    
    /* 分类式论坛列表 */
    .category-section {
      margin-bottom: 15px;
    }
    
    .category-title {
      padding: 10px 15px;
      font-size: 14px;
      color: var(--text-secondary);
      background-color: var(--bg-light);
    }
    
    .category-list {
      background-color: var(--bg-white);
    }
    
    .category-item {
      display: flex;
      align-items: center;
      padding: 12px 15px;
      border-bottom: 1px solid var(--border-light);
    }
    
    .category-item:last-child {
      border-bottom: none;
    }
    
    .category-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin-right: 12px;
    }
    
    .category-info {
      flex: 1;
    }
    
    .category-name {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .category-desc {
      font-size: 13px;
      color: var(--text-secondary);
    }
    
    .category-stats {
      text-align: right;
      color: var(--text-secondary);
    }
    
    .stats-count {
      font-size: 16px;
      font-weight: 600;
      color: var(--primary);
    }
    
    .stats-label {
      font-size: 12px;
    }
    
    /* 热门话题式论坛列表 */
    .topic-list {
      background-color: var(--bg-white);
      border-radius: 12px;
      margin: 0 15px 15px;
      overflow: hidden;
    }
    
    .topic-item {
      padding: 15px;
      border-bottom: 1px solid var(--border-light);
    }
    
    .topic-item:last-child {
      border-bottom: none;
    }
    
    .topic-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    
    .topic-category {
      display: inline-block;
      padding: 3px 8px;
      background-color: var(--primary-light);
      color: var(--primary);
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
    }
    
    .topic-time {
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    .topic-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 10px;
      line-height: 1.4;
    }
    
    .topic-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .topic-author {
      display: flex;
      align-items: center;
    }
    
    .author-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      object-fit: cover;
      margin-right: 8px;
    }
    
    .author-name {
      font-size: 13px;
    }
    
    .topic-actions {
      display: flex;
      gap: 15px;
      font-size: 13px;
      color: var(--text-secondary);
    }
    
    .action-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    .hot-tag {
      display: inline-block;
      background-color: var(--danger);
      color: white;
      width: 16px;
      height: 16px;
      border-radius: 3px;
      font-size: 10px;
      text-align: center;
      line-height: 16px;
      margin-left: 5px;
    }
    
    /* 简洁式论坛列表 */
    .simple-forum {
      background-color: var(--bg-white);
      margin: 0 15px;
      border-radius: 12px;
      overflow: hidden;
    }
    
    .simple-header {
      display: flex;
      padding: 12px 15px;
      border-bottom: 1px solid var(--border-light);
      font-size: 14px;
      color: var(--text-secondary);
    }
    
    .simple-header .col-6 {
      font-weight: 500;
    }
    
    .simple-item {
      display: flex;
      padding: 12px 15px;
      border-bottom: 1px solid var(--border-light);
      align-items: center;
    }
    
    .simple-item:last-child {
      border-bottom: none;
    }
    
    .simple-title {
      flex: 0 0 70%;
      padding-right: 10px;
      font-size: 15px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .simple-stats {
      flex: 0 0 30%;
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      color: var(--text-secondary);
    }
    
    .simple-stats .replies {
      color: var(--primary);
      font-weight: 500;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: var(--bg-white);
      border-top: 1px solid var(--border-light);
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      z-index: 1000;
    }
    
    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 10px;
      flex: 1;
    }
    
    .nav-item.active {
      color: var(--primary);
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 发布按钮 */
    .fab-button {
      position: fixed;
      bottom: 70px;
      right: 20px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: var(--secondary);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      box-shadow: 0 4px 10px rgba(255, 125, 84, 0.4);
      border: none;
      z-index: 1000;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <nav class="navbar navbar-expand">
    <div class="container-fluid">
      <ul class="navbar-nav w-100 justify-content-between">
        <li class="nav-item">
          <a class="nav-link" href="#" aria-label="返回">
            <i class="fa fa-arrow-left"></i>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">社区论坛</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" aria-label="通知">
            <i class="fa fa-bell-o"></i>
          </a>
        </li>
      </ul>
    </div>
  </nav>
  
  <!-- 搜索栏 -->
  <div class="search-container">
    <div class="search-box">
      <i class="fa fa-search search-icon"></i>
      <input type="text" class="search-input" placeholder="搜索论坛、话题或内容...">
    </div>
  </div>
  
  <!-- 样式切换器 -->
  <div class="style-tabs">
    <div class="style-tab active" data-tab="category">分类浏览</div>
    <div class="style-tab" data-tab="hot-topics">热门话题</div>
    <div class="style-tab" data-tab="simple">简洁模式</div>
  </div>
  
  <!-- 分类式论坛列表 -->
  <div class="forum-container active" id="category">
    <div class="category-section">
      <div class="category-title">推荐板块</div>
      <div class="category-list">
        <div class="category-item">
          <div class="category-icon" style="background-color: #E8F5E9; color: var(--success);">
            <i class="fa fa-lightbulb-o"></i>
          </div>
          <div class="category-info">
            <div class="category-name">产品设计与讨论</div>
            <div class="category-desc">分享产品思路，讨论设计方案</div>
          </div>
          <div class="category-stats">
            <div class="stats-count">2.5k</div>
            <div class="stats-label">帖子</div>
          </div>
        </div>
        
        <div class="category-item">
          <div class="category-icon" style="background-color: #E3F2FD; color: #2196F3;">
            <i class="fa fa-code"></i>
          </div>
          <div class="category-info">
            <div class="category-name">技术交流</div>
            <div class="category-desc">编程开发、技术分享与问答</div>
          </div>
          <div class="category-stats">
            <div class="stats-count">5.8k</div>
            <div class="stats-label">帖子</div>
          </div>
        </div>
        
        <div class="category-item">
          <div class="category-icon" style="background-color: #FCE4EC; color: #E91E63;">
            <i class="fa fa-paint-brush"></i>
          </div>
          <div class="category-info">
            <div class="category-name">设计创意</div>
            <div class="category-desc">UI/UX设计、创意作品展示</div>
          </div>
          <div class="category-stats">
            <div class="stats-count">3.2k</div>
            <div class="stats-label">帖子</div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="category-section">
      <div class="category-title">兴趣圈子</div>
      <div class="category-list">
        <div class="category-item">
          <div class="category-icon" style="background-color: #FFF3E0; color: #FF9800;">
            <i class="fa fa-camera"></i>
          </div>
          <div class="category-info">
            <div class="category-name">摄影爱好者</div>
            <div class="category-desc">作品分享、器材讨论、技巧交流</div>
          </div>
          <div class="category-stats">
            <div class="stats-count">8.7k</div>
            <div class="stats-label">帖子</div>
          </div>
        </div>
        
        <div class="category-item">
          <div class="category-icon" style="background-color: #EDE7F6; color: #9C27B0;">
            <i class="fa fa-book"></i>
          </div>
          <div class="category-info">
            <div class="category-name">阅读与分享</div>
            <div class="category-desc">书籍推荐、读书笔记、阅读感悟</div>
          </div>
          <div class="category-stats">
            <div class="stats-count">4.1k</div>
            <div class="stats-label">帖子</div>
          </div>
        </div>
        
        <div class="category-item">
          <div class="category-icon" style="background-color: #E0F7FA; color: #00ACC1;">
            <i class="fa fa-cutlery"></i>
          </div>
          <div class="category-info">
            <div class="category-name">美食探店</div>
            <div class="category-desc">美食推荐、探店分享、烹饪技巧</div>
          </div>
          <div class="category-stats">
            <div class="stats-count">6.3k</div>
            <div class="stats-label">帖子</div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="category-section">
      <div class="category-title">职业发展</div>
      <div class="category-list">
        <div class="category-item">
          <div class="category-icon" style="background-color: #FFEBEE; color: #EF5350;">
            <i class="fa fa-briefcase"></i>
          </div>
          <div class="category-info">
            <div class="category-name">职场交流</div>
            <div class="category-desc">求职经验、职场技巧、行业动态</div>
          </div>
          <div class="category-stats">
            <div class="stats-count">7.2k</div>
            <div class="stats-label">帖子</div>
          </div>
        </div>
        
        <div class="category-item">
          <div class="category-icon" style="background-color: #E8F5E9; color: #66BB6A;">
            <i class="fa fa-graduation-cap"></i>
          </div>
          <div class="category-info">
            <div class="category-name">学习与成长</div>
            <div class="category-desc">技能提升、在线课程、学习方法</div>
          </div>
          <div class="category-stats">
            <div class="stats-count">3.8k</div>
            <div class="stats-label">帖子</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 热门话题式论坛列表 -->
  <div class="forum-container" id="hot-topics">
    <div class="topic-list">
      <div class="topic-item">
        <div class="topic-header">
          <span class="topic-category">产品设计</span>
          <span class="topic-time">2小时前</span>
        </div>
        <div class="topic-title">
          2023年最值得关注的5个产品设计趋势 <span class="hot-tag">热</span>
        </div>
        <div class="topic-meta">
          <div class="topic-author">
            <img src="https://picsum.photos/200/200?random=1" alt="作者头像" class="author-avatar">
            <span class="author-name">王宇轩</span>
          </div>
          <div class="topic-actions">
            <div class="action-item">
              <i class="fa fa-eye"></i> 2.4k
            </div>
            <div class="action-item">
              <i class="fa fa-comment-o"></i> 86
            </div>
            <div class="action-item">
              <i class="fa fa-heart-o"></i> 324
            </div>
          </div>
        </div>
      </div>
      
      <div class="topic-item">
        <div class="topic-header">
          <span class="topic-category">技术交流</span>
          <span class="topic-time">昨天 15:30</span>
        </div>
        <div class="topic-title">
          前端开发效率提升指南：从工具到工作流的全面优化
        </div>
        <div class="topic-meta">
          <div class="topic-author">
            <img src="https://picsum.photos/200/200?random=2" alt="作者头像" class="author-avatar">
            <span class="author-name">李思成</span>
          </div>
          <div class="topic-actions">
            <div class="action-item">
              <i class="fa fa-eye"></i> 1.8k
            </div>
            <div class="action-item">
              <i class="fa fa-comment-o"></i> 52
            </div>
            <div class="action-item">
              <i class="fa fa-heart-o"></i> 198
            </div>
          </div>
        </div>
      </div>
      
      <div class="topic-item">
        <div class="topic-header">
          <span class="topic-category">职场交流</span>
          <span class="topic-time">3天前</span>
        </div>
        <div class="topic-title">
          从初级设计师到设计总监，我用了5年时间总结的成长路径 <span class="hot-tag">热</span>
        </div>
        <div class="topic-meta">
          <div class="topic-author">
            <img src="https://picsum.photos/200/200?random=3" alt="作者头像" class="author-avatar">
            <span class="author-name">张雨晴</span>
          </div>
          <div class="topic-actions">
            <div class="action-item">
              <i class="fa fa-eye"></i> 5.6k
            </div>
            <div class="action-item">
              <i class="fa fa-comment-o"></i> 215
            </div>
            <div class="action-item">
              <i class="fa fa-heart-o"></i> 986
            </div>
          </div>
        </div>
      </div>
      
      <div class="topic-item">
        <div class="topic-header">
          <span class="topic-category">摄影爱好者</span>
          <span class="topic-time">4天前</span>
        </div>
        <div class="topic-title">
          新手入门必看：如何用手机拍出专业级照片？分享我的5个实用技巧
        </div>
        <div class="topic-meta">
          <div class="topic-author">
            <img src="https://picsum.photos/200/200?random=4" alt="作者头像" class="author-avatar">
            <span class="author-name">陈明远</span>
          </div>
          <div class="topic-actions">
            <div class="action-item">
              <i class="fa fa-eye"></i> 3.2k
            </div>
            <div class="action-item">
              <i class="fa fa-comment-o"></i> 143
            </div>
            <div class="action-item">
              <i class="fa fa-heart-o"></i> 652
            </div>
          </div>
        </div>
      </div>
      
      <div class="topic-item">
        <div class="topic-header">
          <span class="topic-category">美食探店</span>
          <span class="topic-time">1周前</span>
        </div>
        <div class="topic-title">
          隐藏在城市角落的10家宝藏餐厅，本地人都未必知道
        </div>
        <div class="topic-meta">
          <div class="topic-author">
            <img src="https://picsum.photos/200/200?random=5" alt="作者头像" class="author-avatar">
            <span class="author-name">刘佳琪</span>
          </div>
          <div class="topic-actions">
            <div class="action-item">
              <i class="fa fa-eye"></i> 4.7k
            </div>
            <div class="action-item">
              <i class="fa fa-comment-o"></i> 287
            </div>
            <div class="action-item">
              <i class="fa fa-heart-o"></i> 1253
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 简洁式论坛列表 -->
  <div class="forum-container" id="simple">
    <div class="simple-forum">
      <div class="simple-header">
        <div class="col-6">话题</div>
        <div class="col-6 text-end">回复/浏览</div>
      </div>
      
      <div class="simple-item">
        <div class="simple-title">
          <span class="topic-category" style="margin-right: 5px;">产品</span>
          如何打造用户喜爱的产品：从需求到落地的全流程
        </div>
        <div class="simple-stats">
          <span class="replies">128</span>
          <span class="views">3.5k</span>
        </div>
      </div>
      
      <div class="simple-item">
        <div class="simple-title">
          <span class="topic-category" style="margin-right: 5px;">技术</span>
          React 18新特性详解及迁移指南
        </div>
        <div class="simple-stats">
          <span class="replies">86</span>
          <span class="views">2.1k</span>
        </div>
      </div>
      
      <div class="simple-item">
        <div class="simple-title">
          <span class="topic-category" style="margin-right: 5px;">设计</span>
          极简主义设计在移动端的应用与实践
        </div>
        <div class="simple-stats">
          <span class="replies">54</span>
          <span class="views">1.7k</span>
        </div>
      </div>
      
      <div class="simple-item">
        <div class="simple-title">
          <span class="topic-category" style="margin-right: 5px;">职场</span>
          远程工作效率提升：我的6个实用方法
        </div>
        <div class="simple-stats">
          <span class="replies">203</span>
          <span class="views">6.8k</span>
        </div>
      </div>
      
      <div class="simple-item">
        <div class="simple-title">
          <span class="topic-category" style="margin-right: 5px;">阅读</span>
          2023年上半年最值得一读的10本商业书籍
        </div>
        <div class="simple-stats">
          <span class="replies">156</span>
          <span class="views">4.2k</span>
        </div>
      </div>
      
      <div class="simple-item">
        <div class="simple-title">
          <span class="topic-category" style="margin-right: 5px;">摄影</span>
          风光摄影的黄金时刻与构图技巧
        </div>
        <div class="simple-stats">
          <span class="replies">97</span>
          <span class="views">2.9k</span>
        </div>
      </div>
      
      <div class="simple-item">
        <div class="simple-title">
          <span class="topic-category" style="margin-right: 5px;">美食</span>
          在家也能做的5道米其林级别的简易料理
        </div>
        <div class="simple-stats">
          <span class="replies">215</span>
          <span class="views">7.3k</span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-comments nav-icon"></i>
      <span>论坛</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user nav-icon"></i>
      <span>我的</span>
    </a>
  </div>
  
  <!-- 发布按钮 -->
  <button class="fab-button" aria-label="发布新帖">
    <i class="fa fa-plus"></i>
  </button>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 切换不同样式的论坛列表
    document.querySelectorAll('.style-tab').forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有活跃状态
        document.querySelectorAll('.style-tab').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.forum-container').forEach(c => c.classList.remove('active'));
        
        // 添加当前活跃状态
        this.classList.add('active');
        const tabId = this.getAttribute('data-tab');
        document.getElementById(tabId).classList.add('active');
      });
    });
    
    // 发布新帖按钮点击事件
    document.querySelector('.fab-button').addEventListener('click', function() {
      // 创建发布帖子的模态框
      const modal = document.createElement('div');
      modal.className = 'fixed inset-0 bg-black bg-opacity-50 z-50 flex items-end justify-center';
      modal.innerHTML = `
        <div class="bg-white w-full rounded-t-xl p-5 max-height-[80vh]">
          <div class="text-center mb-6">
            <h3 class="text-lg font-semibold">发布新帖</h3>
          </div>
          
          <div class="mb-4">
            <label class="block text-sm text-gray-600 mb-2">选择分类</label>
            <select class="w-full p-3 border border-gray-300 rounded-lg">
              <option>产品设计与讨论</option>
              <option>技术交流</option>
              <option>设计创意</option>
              <option>摄影爱好者</option>
              <option>阅读与分享</option>
              <option>美食探店</option>
              <option>职场交流</option>
              <option>学习与成长</option>
            </select>
          </div>
          
          <div class="mb-4">
            <label class="block text-sm text-gray-600 mb-2">标题</label>
            <input type="text" class="w-full p-3 border border-gray-300 rounded-lg" placeholder="请输入帖子标题">
          </div>
          
          <div class="mb-6">
            <label class="block text-sm text-gray-600 mb-2">内容</label>
            <textarea class="w-full p-3 border border-gray-300 rounded-lg" rows="4" placeholder="分享你的想法..."></textarea>
          </div>
          
          <div class="flex gap-3">
            <button class="flex-1 py-3 bg-gray-100 rounded-lg text-gray-700 font-medium" id="cancelPost">取消</button>
            <button class="flex-1 py-3 bg-primary rounded-lg text-white font-medium">发布</button>
          </div>
        </div>
      `;
      document.body.appendChild(modal);
      document.body.style.overflow = 'hidden';
      
      // 取消按钮事件
      modal.querySelector('#cancelPost').addEventListener('click', function() {
        modal.remove();
        document.body.style.overflow = '';
      });
      
      // 点击外部关闭
      modal.addEventListener('click', function(e) {
        if (e.target === modal) {
          modal.remove();
          document.body.style.overflow = '';
        }
      });
    });
    
    // 点击话题或分类项进入详情
    document.querySelectorAll('.category-item, .topic-item, .simple-item').forEach(item => {
      item.addEventListener('click', function() {
        const title = this.querySelector('.category-name, .topic-title, .simple-title')?.textContent || '帖子详情';
        alert(`进入"${title.trim()}"详情页面`);
      });
    });
  </script>
</body>
</html>
